<template>
	<view class="container" id="customerServerTip">
		<view class="carousel">
			<image :src="goods.meta.detailImageUrl" mode="widthFix" :lazy-load="lazyLoad" @error="errorImage"
				@click="showPrivewImg(goods.meta.detailImageUrl)" style="width: 100%;"></image>
			<!-- 		<view class="flex-row items-center justify-center"
				style="position: absolute; top: 100rpx; left: 30rpx; background-color: rgba(255, 255, 255, 0.2); width: 80rpx;height: 80rpx;border-radius: 40rpx;">
				<u-icon name="arrow-left" size="28"></u-icon>
			</view> -->
		</view>
		<view class="introduce-section">
			<view style="display: flex;padding-bottom: 20rpx;" class="items-center">
				<view class="price-box" style="margin-bottom: 10rpx;flex: 1">
					<text class="price-tip">¥</text>
					<text class="price">{{goods.price?goods.price.toFixed(2):'0.00'}}</text>
					<text class="price2"
						v-if="goods.meta.originalPrice&&goods.meta.originalPrice>0&&goods.meta.originalPrice!=goods.price">¥{{goods.meta.originalPrice?goods.meta.originalPrice.toFixed(2):'0.00'}}</text>
				</view>
				<!-- 	<view style="width: auto; margin-top: 5px;" v-if="selectSpec.isYs&&userToken">
					<u-tag :text="selectSpec.IsSubscribe?'已订阅':'订阅'" size="mini"
						:type="selectSpec.IsSubscribe?'success':'primary'"></u-tag>
				</view> -->
				<view style="height: 64upx; font-size: 30upx; vertical-align: middle;display: flex;"
					class="items-center" @click="sharePopup">
					<image src="/static/image/share.png" style="width: 30px;margin-top: 5px;" mode="widthFix">
					</image>
					<view style="margin-top: 5px; color: #666;font-size: 36rpx;">分享</view>
				</view>
			</view>

			<text class="title" style="padding: 20rpx 0px;color: #666;padding-right: 10rpx;">{{goods.name}} </text>
			<u-gap :height="10"></u-gap>
			<view class="flex-row " style="flex-wrap: wrap;">
				<view v-for="(cate,index) in  goods.categoryNames" :key="index" style="padding: 10rpx;">
					<u-tag type="warning" :text="cate" icon="tags-fill"></u-tag>
				</view>

			</view>
			<u-gap :height="20"></u-gap>
			<view class="flex-row justify-between" style="margin: 20rpx; text-align: left;">
				<view>积分:<text style="font-size: 28rpx; color: #ff0101;">{{goods.pv}} </text></view>
				<view>
					库存:<text style="font-size: 28rpx; color: #ff0101;">{{goods.stock}}</text>
				</view>

			</view>
			<view class="" style="width: 100%;">
				<!-- 			<view v-if="goods.meta.treatmentEffect">
					<u-alert title="用途" type="warning" :description="goods.meta.treatmentEffect"></u-alert>
				</view> -->
				<view
					style="background-color: #FDF6EC;font-size: 32rpx; color: #f9ae3d; padding: 20rpx; border-radius: 10rpx;"
					class="flex-row " v-if="goods.meta.treatmentEffect">
					<view style="font-size: 32rpx;">
						用途:
					</view>
					<view>
						{{goods.meta.treatmentEffect}}
					</view>
				</view>
			</view>

			<view class="service" v-if="goods.feedback">
				<view style="background-color: #f2f2f2;padding: 20rpx;white-space: pre-wrap;">
					<rich-text :nodes="goods.feedback" style="font-size: 32rpx;"></rich-text>
				</view>

			</view>
		</view>
		<view class="detail-desc" style="background-color: #fff;">
			<view class="goods-content" style="white-space: pre-wrap;">

				<rich-text :nodes="goods.description" style="font-size: 32rpx;"></rich-text>
			</view>

		</view>
		<!-- 评价 -->
		<!-- <view class="eva-section">
			<view class="e-header" @click="goMessage">
				<view style="flex: 1;">
					<text class="tit">咨询信息</text>
					<text v-if="messages.length>0">({{messages.length}})</text>
				</view>
				<view class="flex-row">
					查看更多<u-icon name="arrow-right"> </u-icon>
				</view>
			</view>
			<view class="flex-col" v-for="item in messages" :key="item.Id" style="padding: 20rpx;">

				<view style="background: #f1f5fd;padding: 20rpx;font-size: 28rpx;">
					<view>{{formatDate(item.createdAt)}}</view>
					<view style=" padding: 10rpx 0;">
						{{item.content}}
					</view>
					<view style="background-color: #f2f2f2;padding: 20rpx 10rpx;" v-if="item.replied">
						<view>
							{{formatDate(item.repliedAt)}}
						</view>
						<view style="padding: 10rpx 0;">
							{{item.reply}}
						</view>
					</view>
				</view>

			</view>

		</view> -->
		<!-- 		<view style="padding: 20rpx; margin-top: 20px;">
			<view class="flex-col justify-center " style="background-color: #fff; padding: 20rpx;">
				<view class="flex-row items-center  justify-center">
					<view class="flex-1">
						<u-textarea customStyle="background-color: #f2f2f2" v-model="content" placeholder="请输入咨询内容"
							@confirm="save()"></u-textarea>
					</view>

				</view>
				<u-gap size="10"></u-gap>
				<button :disabled="submited" @click="save" size="mini">提交</button>

			</view>
		</view> -->

		<!-- 底部操作菜单 -->
		<view class="page-bottom">
			<button type="primary" size="mini" @click="goCreateOrder(goods)"
				style="background-color: #ff0101; width: 400rpx; font-size: 32rpx;">立即下单</button>
		</view>
		<image :src="bottomImage.ImagerUrl" style="width: 100%;" mode="widthFix">
		</image>
		<u-popup :show="showSharePopup" @close="showSharePopup=false">
			<view class="share-btn-box">
				<view class="flex-row ">
					<view style="flex: 1;">
						<button data-name="shareBtn" open-type="share"
							style="margin: 20px auto;line-height: unset;background-color: #fff;font-size:16px">
							<image src="/static/icons/wechat.png" style="width: 60rpx;" mode="widthFix"></image>
							<view>微信好友</view>
						</button>
					</view>
					<view style="flex: 1;">
						<view style="margin: 20px auto;text-align: center; font-size:16px"
							@click="showCreateShareImage()">
							<image src="/static/icons/d_hb.png" style="width: 60rpx;" mode="widthFix"></image>
							<view>下载海报</view>

						</view>
					</view>
				</view>
				<view style="border-top: 1px solid #f2f2f2; padding: 20px;font-size:18px;width: 100%; "
					@click="showSharePopup=false">
					<text>取消</text>
				</view>
			</view>
		</u-popup>
		<share-image ref="shareImage"></share-image>
	</view>
</template>

<script>
	import Utils from '../../common/Utils.js'
	export default {
		data() {
			return {
				showSharePopup: false,
				goods: {

				},
				eavs: [],
				shareUrl: "",
				searchForm: {
					start: "",
					end: "",
					pageNo: 0,
					pageSize: 15,
					channel: "",
					subChannel: "",
				},
				messages: [],
				goodsId: "",
				submited: false,
				messageSize: 0,
			};
		},

		onLoad(options) {
			if (options.scene) {
				const scene = decodeURIComponent(options.scene);
				// this.$set(options, "uid", s[0]);
				let tmp = scene.split('&');
				this.$set(options, "id", tmp[0]);
				this.$set(options, "inviteCode", tmp[1]);

			}
			if (options.inviteCode) {
				uni.setStorageSync("langpin_register_inviteCode", options.inviteCode);
			}
			//接收传值,id里面放的是标题，因为测试数据并没写id 
			this.goodsId = options.id;
			//this.sendAddress = this.$store.state.userLocation;

		},

		onShareAppMessage(res) {
			console.log(res);
			let that = this;
			//this.createJobImg()
			let shareName = this.goods.name

			return {
				title: shareName,
				path: this.shareUrl,
				imageUrl: this.goods.meta.imageUrl
			}
		},
		onShow() {
			this.userToken = this.$store.state.userToken;
			this.getGoodsDetail(this.goodsId)
		},

		methods: {
			showPrivewImg(imgUrl) {
				wx.previewImage({
					current: imgUrl, // 当前显示图片的http链接
					urls: [imgUrl] // 需要预览的图片http链接列表
				})
			},
			save() {
				if (this.submited) {
					return;
				}

				if (!this.content) {
					uni.showToast({
						title: '请输入咨询的内容',
						icon: 'none'
					});
					this.submited = false;
					return;
				}
				this.submited = true;
				let postData = {
					channel: "productConsult",
					subChannel: this.goods.id,
					content: this.content
				}
				this.$post({
					url: `${this.$Utils.ApiUrl}/joyMessages`,
					data: postData
				}).then((res) => {
					this.content = "";
					uni.showToast({
						title: '提交成功',
						icon: 'none'
					});
					this.reSearch()
				})
			},
			formatDate(date) {
				return this.$Utils.formatDate(date, 'yyyy-MM-dd HH:mm:ss')
			},
			reSearch() {
				let token = this.$store.state.userToken
				if (!token) {
					return;
				}
				let curDate = new Date();
				let beginDate = new Date(curDate.setMonth(-6))
				this.$set(this.searchForm, 'start', this.$Utils.formatDate(beginDate, 'yyyy-MM-ddT00:00:00'));
				this.$set(this.searchForm, 'end', this.$Utils.formatDate(new Date(), 'yyyy-MM-ddT23:59:59'))
				this.$set(this.searchForm, 'channel', "productConsult");
				this.$set(this.searchForm, 'subChannel', this.goods.id)
				this.curpage = 0;
				this.items = [];
				this.searchForm.pageNo = 0;
				this.searchForm.pageSize = 15

				this.searchData()
			},
			searchData() {
				this.status = 'loading';
				this.$get({
					url: `${this.$Utils.ApiUrl}/joyMessages/mine`,
					data: this.searchForm
				}).then(res => {
					console.log(res);
					this.totalPage = res.totalPages;
					this.messages = res.content;

					if (res && res.last) {
						this.status = 'nomore'
					}

				})
			},
			sharePopup() {
				this.showSharePopup = true;
			},

			goCreateOrder(item) {
				console.log(item)
				uni.navigateTo({
					url: '/pages-orders/create/create?id=' + item.id
				})
			},
			goMessage() {
				uni.navigateTo({
					url: '/pages-publics/message/message?channel=productConsult&subChannel=' + this.goods.id
				})
			},

			getGoodsDetail(id) {

				var _self = this;
				this.$get({
					url: `${Utils.ApiUrl}/products/${id}`,
					data: {

					}
				}).then(res => {
					this.goods = res;
					this.shareUrl = `pages-publics/GoodsDetails/GoodsDetails?id=${this.goods.id}`
					let token = this.$store.state.userToken;
					if (token) {
						if (uni.getStorageSync(this.$Utils.key_user_info)) {
							const userInfo = uni.getStorageSync(this.$Utils.key_user_info);
							this.shareUrl += "&inviteCode=" + userInfo.user.inviteCode;

						}
					}
					this.reSearch()

				})
			},
			showCreateShareImage() {
				let token = this.$store.state.userToken;
				if (!token) {
					uni.navigateTo({
						url: "/pages-publics/noLogin/noLogin"
					})
					return
				}
				this.showSharePopup = false;
				let userInfo = this.$store.state.userInfo;
				this.$refs.shareImage.showPopup(userInfo, this.goods)
			}

		},
	}
</script>

<style scoped lang='scss'>
	.share-btn-box {
		background-color: #fff;
		padding: 20px;
		text-align: center;
	}

	.share-btn-group {
		display: flex;

	}

	button::after {
		border: 0px;
	}

	uni-video {
		width: 100%;
		height: 300px;
	}


	.uni-video-container {
		width: 100%;
		height: 300px;
	}


	.seck-times {
		font-size: 28rpx;
		padding: 4rpx;
		color: #FFF;
	}

	.goods-content {
		padding: 20rpx;
		line-height: 32px;
		font-size: 28rpx;

		img {
			width: 100%;
		}
	}

	._img {
		width: 100%;
	}

	.service {
		padding-top: 20px;

		strong {
			color: #564d45;
			padding: 0rpx 0;
		}

		strong::before {
			content: '·';
			margin-right: 10rpx;
		}

		p {
			color: #909399;
			line-height: 24px;
			padding: 10rpx;
		}
	}


	.waterfall {
		height: auto;
		display: grid;
		grid-gap: 20rpx;
		grid-template-columns: repeat(3, 1fr);
		padding: 5px;
	}

	.waterfall .goods-box {

		margin: 10rpx 5rpx;
		border-radius: 10upx;
		position: relative;

	}

	.goods-pic {
		height: 280upx;
		width: 100%;
		/* 		border-top-left-radius: 10upx;
		border-top-right-radius: 10upx; */
	}

	.goods-info {
		color: #564d45;
		line-height: 44rpx;

		display: -webkit-box;
		overflow: hidden;
		padding: 0 20upx;
		text-overflow: ellipsis;
		display: -webkit-box;
		font-size: 24rpx;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		word-break: break-all;
		margin-bottom: 30upx;
		font-family: SourceHanSansCN;

	}

	.buy-btn {
		background-color: rgb(51, 51, 51);
		text-align: center;
		text-align: center;
		color: #fff;
		line-height: 42rpx;
		height: 42rpx;
		width: 42rpx;
		display: flex;
		align-items: center;
		border-radius: 21rpx;
	}

	.goods-item {
		padding-bottom: 20px;
	}

	page {
		background: #f6f6f6;
	}

	.sendDate {
		color: $uni-color-primary;
		font-size: 14px;
	}

	.gift-box {}

	.address {
		min-height: 100vh;
	}

	.uni-numbox {
		position: unset;
	}

	.icon-you {
		font-size: $font-base + 2upx;
		color: #888;
	}

	.carousel {

		position: relative;

		swiper {
			height: unset;
		}

		.image-wrapper {
			width: 100%;
			height: 100%;
			position: relative;
		}

		.swiper-item {
			display: flex;
			justify-content: center;
			align-content: center;
			height: 750upx;
			overflow: hidden;

		}

	}

	/* 标题简介 */
	.introduce-section {
		background: #fff;
		padding: 20upx 30upx;
		border-bottom-left-radius: 20upx;
		border-bottom-right-radius: 20upx;

		.title {
			font-size: 32rpx;
			color: $font-color-dark;
			padding-top: 30upx;
			line-height: 50upx;
		}

		.price-tip {
			font-size: 43upx;
		}

		.price-box {
			display: flex;
			align-items: baseline;
			height: 64upx;
			padding: 10upx 0;
			font-size: 26upx;
			color: $base-color;
		}

		.price {
			font-size: $font-lg + 22upx;
			font-weight: bold;
		}

		.price2 {
			font-size: 36rpx;
			padding-left: 10rpx;
			font-weight: bold;
			color: #564d45;
			text-decoration: line-through;

		}

		.m-price {
			margin: 0 12upx;
			color: $font-color-light;
			text-decoration: line-through;
		}



		.bot-row {
			display: flex;
			align-items: center;
			height: 50upx;
			font-size: 28rpx;
			color: $font-color-light;

			text {
				flex: 1;
			}
		}
	}

	.coupon-tip {
		align-items: center;
		padding: 4upx 10upx;
		background: $uni-color-primary;
		font-size: $font-sm;
		color: #fff;
		border-radius: 6upx;
		line-height: 1;
		transform: translateY(-4upx);
	}

	/* 分享 */
	.share-section {
		display: flex;
		align-items: center;
		color: $font-color-base;
		background: linear-gradient(left, #fdf5f6, #fbebf6);
		padding: 12upx 30upx;

		.share-icon {
			display: flex;
			align-items: center;
			width: 70upx;
			height: 30upx;
			line-height: 1;
			border: 1px solid $uni-color-primary;
			border-radius: 4upx;
			position: relative;
			overflow: hidden;
			font-size: 22upx;
			color: $uni-color-primary;

			&:after {
				content: '';
				width: 50upx;
				height: 50upx;
				border-radius: 50%;
				left: -20upx;
				top: -12upx;
				position: absolute;
				background: $uni-color-primary;
			}
		}

		.icon-xingxing {
			position: relative;
			z-index: 1;
			font-size: 24upx;
			margin-left: 2upx;
			margin-right: 10upx;
			color: #fff;
			line-height: 1;
		}

		.tit {
			font-size: $font-base;
			margin-left: 10upx;
		}

		.icon-bangzhu1 {
			padding: 10upx;
			font-size: 30upx;
			line-height: 1;
		}

		.share-btn {
			flex: 1;
			text-align: right;
			font-size: $font-sm;
			color: $uni-color-primary;
		}

		.icon-you {
			font-size: $font-sm;
			margin-left: 4upx;
			color: $uni-color-primary;
		}
	}

	.spec-box {
		margin: 10px 0;
		border-radius: 20upx;
		background-color: #FFFFFF;
		padding: 10px 0;

	}

	.c-list {
		font-size: $font-sm + 2upx;
		color: $font-color-base;
		background: #fff;

		.c-row {
			display: flex;
			align-items: center;
			padding: 40upx 8upx;
			position: relative;
		}

		.tit {
			width: 140upx;
			font-weight: bold;
		}

		.con {
			flex: 1;
			color: #909399;
			font-weight: normal;
			height: auto;

			.selected-text {
				margin-right: 10upx;
				font-size: 26rpx;

			}
		}

		.bz-list {

			font-size: $font-sm+2upx;
			color: $font-color-dark;

			text {
				display: inline-block;
				margin-right: 30upx;
			}
		}

		.con-list {
			flex: 1;
			display: flex;
			flex-direction: column;
			color: $font-color-dark;

		}

		.red {
			color: $uni-color-primary;
		}
	}

	/* 评价 */
	.eva-section {
		display: flex;
		flex-direction: column;
		padding: 20upx 30upx;
		background: #fff;
		margin-top: 16upx;

		.e-header {
			display: flex;
			align-items: center;
			height: 70upx;
			font-size: $font-sm + 2upx;
			color: $font-color-light;

			.tit {
				font-size: $font-base + 2upx;
				color: $font-color-dark;
				margin-right: 4upx;
			}

			.tip {
				flex: 1;
				text-align: right;
			}

			.icon-you {
				margin-left: 10upx;
			}
		}


	}

	.buyer-box {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		grid-gap: 10rpx;

	}

	.eva-box {
		display: flex;
		padding: 20upx 0;

		.portrait {
			flex-shrink: 0;
			width: 80upx;
			height: 80upx;
			border-radius: 100px;
		}

		.right {
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: $font-base;
			color: $font-color-base;
			padding-left: 26upx;

			.con {
				font-size: $font-base;
				color: $font-color-dark;
				padding: 20upx 0;
			}

			.img {
				display: grid;
				grid-template-columns: repeat(5, 1fr);
			}

			.bot {
				display: flex;
				justify-content: space-between;
				font-size: $font-sm;
				color: $font-color-light;
			}
		}
	}

	/*  详情 */
	.detail-desc {
		margin-top: 16upx;
		background-color: #fff;

		img {
			width: 100%;
		}

		.d-header {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 80upx;
			font-size: $font-base + 2upx;
			color: $font-color-dark;


			text {
				padding: 0 20upx;
				z-index: 1;
			}


		}
	}

	/* 规格选择弹窗 */
	.attr-content {
		padding: 10upx 30upx;

		.a-t {
			display: flex;

			image {
				width: 170upx;
				height: 170upx;
				flex-shrink: 0;
				margin-top: -40upx;
				border-radius: 8upx;
				;
			}

			.right {
				display: flex;
				flex-direction: column;
				padding-left: 24upx;
				font-size: $font-sm + 2upx;
				color: $font-color-base;
				line-height: 42upx;

				.price {
					font-size: $font-lg;
					color: $uni-color-primary;
					margin-bottom: 10upx;
				}

				.selected-text {
					margin-right: 10upx;
				}
			}
		}

		.attr-list {
			display: flex;
			flex-direction: column;
			font-size: $font-base + 2upx;
			color: $font-color-base;
			padding-top: 30upx;
			padding-left: 10upx;
		}

		.item-list {
			padding: 20upx 0 0;
			display: flex;
			flex-wrap: wrap;

			text {
				display: flex;
				align-items: center;
				justify-content: center;
				background: #eee;
				margin-right: 20upx;
				margin-bottom: 20upx;
				border-radius: 100upx;
				min-width: 60upx;
				height: 60upx;
				padding: 0 20upx;
				font-size: $font-base;
				color: $font-color-dark;
			}

			.selected {
				background: #fbebee;
				color: $uni-color-primary;
			}
		}
	}

	/*  弹出层 */
	.popup {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 99;

		&.show {
			display: block;

			.mask {
				animation: showPopup 0.2s linear both;
			}

			.layer {
				animation: showLayer 0.2s linear both;
			}
		}

		&.hide {
			.mask {
				animation: hidePopup 0.2s linear both;
			}

			.layer {
				animation: hideLayer 0.2s linear both;
			}
		}

		&.none {
			display: none;
		}

		.mask {
			position: fixed;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			background-color: rgba(0, 0, 0, 0.4);
		}

		.layer {
			position: fixed;
			z-index: 99;
			bottom: 0;
			width: 100%;
			min-height: 40vh;
			border-radius: 10upx 10upx 0 0;
			background-color: #fff;

			.btn {
				height: 66upx;
				line-height: 66upx;
				border-radius: 100upx;
				background: $uni-color-primary;
				font-size: $font-base + 2upx;
				color: #fff;
				margin: 30upx auto 20upx;
			}
		}

		@keyframes showPopup {
			0% {
				opacity: 0;
			}

			100% {
				opacity: 1;
			}
		}

		@keyframes hidePopup {
			0% {
				opacity: 1;
			}

			100% {
				opacity: 0;
			}
		}

		@keyframes showLayer {
			0% {
				transform: translateY(120%);
			}

			100% {
				transform: translateY(0%);
			}
		}

		@keyframes hideLayer {
			0% {
				transform: translateY(0);
			}

			100% {
				transform: translateY(120%);
			}
		}
	}

	/* 底部操作菜单 */
	.page-bottom {
		position: fixed;
		left: 0upx;
		bottom: 0upx;
		z-index: 95;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100vw;
		height: 200upx;
		background: rgba(255, 255, 255, .9);

		.p-tn {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: $font-sm;
			color: $font-color-base;
			width: 96upx;
			height: 80upx;

			.yticon {
				font-size: 40upx;
				line-height: 48upx;
				color: $font-color-light;
			}

			&.active,
			&.active .yticon {
				color: $uni-color-primary;
			}

			.icon-fenxiang2 {
				font-size: 42upx;
				transform: translateY(-2upx);
			}

			.icon-shoucang {
				font-size: 46upx;
			}

		}

		.action-btn-group {
			display: flex;
			height: 80upx;
			overflow: hidden;
			margin-left: 20upx;
			position: relative;



			.action-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 180upx;
				height: 80upx;
				font-size: $font-base;
				padding: 0;
				color: $base-color;
				border-radius: 0;
				background: #ffefcf;
				margin: 0 2px;
			}

			.buy-now-btn {
				background-color: $base-color;
				color: #fff
			}

			.buy-now-btn-grey {
				background-color: #eee;
				color: #000
			}
		}
	}

	.goodsDapei {
		width: 100%;
		position: absolute;
		top: 0px;
		color: #fff;
		display: grid;
		grid-template-rows: repeat(6, 1fr);
		height: 100%;
		font-size: 14px;

		.dp {
			display: flex;
		}

		.dp1 {
			display: flex;
			text-align: right;
			justify-content: flex-end;
			align-items: center;
			padding: 5px;

			.goodsTextbox {
				display: flex;
				background-color: rgba(0, 0, 0, 0.3);

				.goodsTitle {
					max-width: 290rpx;
				}
			}


		}

		.dp2 {
			display: flex;
			text-align: left;
			justify-content: flex-start;
			align-items: center;
			padding: 5px;

			.goodsTextbox {
				display: flex;
				background-color: rgba(0, 0, 0, 0.3);

				.goodsTitle {
					max-width: 290rpx;
				}
			}

		}



		.dp3 {
			display: flex;
			text-align: right;
			justify-content: flex-end;
			align-items: center;
			padding: 5px;

			.goodsTextbox {
				display: flex;
				background-color: rgba(0, 0, 0, 0.3);

				.goodsTitle {
					max-width: 290rpx;
				}
			}


		}

		.dp4 {
			display: flex;
			text-align: left;
			justify-content: flex-start;
			align-items: center;
			padding: 5px;

			.goodsTextbox {
				display: flex;
				background-color: rgba(0, 0, 0, 0.3);

				.goodsTitle {
					max-width: 290rpx;
				}
			}

		}

		.dp5 {
			display: flex;
			text-align: right;
			justify-content: flex-end;
			align-items: center;
			padding: 5px;

			.goodsTextbox {
				display: flex;
				background-color: rgba(0, 0, 0, 0.3);

				.goodsTitle {
					max-width: 290rpx;
				}
			}


		}

		.dp6 {
			display: flex;
			justify-content: flex-end;
			text-align: right;
			align-items: center;
			padding: 5px;

			.goodsTextbox {
				display: flex;
				background-color: rgba(0, 0, 0, 0.3);

				.goodsTitle {}
			}

		}
	}

	.subTitle {
		color: #ccc;
		font-size: 12px;
	}
</style>